/**
 * Icon 组件
 */
import React, { FC } from 'react';
import classNames from 'classnames';
import { FontAwesomeIcon, FontAwesomeIconProps } from '@fortawesome/react-fontawesome';

export type ThemeProps = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'light' | 'dark';

export interface IconProps extends FontAwesomeIconProps{
  theme?: ThemeProps,
}

/**
 * 网站图标库
 * 
 * ### 引入方式 
 * 
 * ```js 
 * import { Icon } from 'rqx-ui';
 * ```
 * 
 * 可用的图标样式参考
 * https://fontawesome.com/v5.15/icons?d=gallery&p=2&m=free
 */
export const Icon: FC<IconProps> = (props) => {
  // 根据 theme 设置不同的样式
  const { className, theme, ...rest } = props;

  const classes = classNames('icon', className, {
    [`icon-${theme}`]: theme,
  });

  return (
    <FontAwesomeIcon
      className={classes}
      {...rest}
    />
  )
}

Icon.defaultProps = {
  theme: 'primary',
}

export default Icon;